<!--绘图-->
<template>
    <div class="content">

        <div class="content-toolbar">
            <toolbar></toolbar>
        </div>
        <div class="content-content">
            <div class="content-left">
                <div class="content-left-img"
                     v-for="(item, i) of assetsInfos" :key="i"
                     draggable="true"
                     @ondragstart="onDragstart($event, item)"
                >
                    <img :src="item.url" style="object-fit: contain" />
                </div>
            </div>
            <div class="content-right">
                <div class="draw-board"
                     ref="drawBoardRef"
                     :ondragover="onTargetDragover"
                     :ondrop="handleDrop"
                     @contextmenu="contextmenu">
                    <div class="draw-konva" id="canvas-konva"></div>
                </div>
            </div>

        </div>



    </div>
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import rectangle from '../../../assets/img/konva/rectangle.png'
    import png1 from '../../../assets/img/konva/1.png'
    import drawKonva from './index'
    import toolbar from './toolbar.vue'


    const drawBoardRef = ref();
    const stage = ref();
    const assetsInfos = ref([
        {name:'rectangle',url:rectangle},
        {name:'png1',url:png1}
    ]);

    // 选中需要移动的图片信息
    const imgItem = ref();

    // 初始化konva
    const initialization = () => {
        const konvaWidth = drawBoardRef.value.offsetWidth;
        const konvaHeight = drawBoardRef.value.offsetHeight;
        // 生成舞台
        stage.value = new Konva.Stage({
            id:'stageId',
            container:'canvas-konva',
            width:konvaWidth,
            height:konvaHeight,
        });
        drawKonva.init(stage.value)

    };

    // 去除浏览器自带的鼠标点击事件
    const contextmenu =(e)=>{
        e.preventDefault();
    };

    // 图片点击移动事件
    const onDragstart =(e, item)=>{
        imgItem.value = item;
        e.dataTransfer.setData('url', item.url)
    };
    // 鼠标在该区域移动
    const onTargetDragover =(e)=>{
        event.preventDefault()
    };
    const handleDrop =(e)=>{
        const url = e.dataTransfer.getData('url')
        drawKonva.drawImg(e,url)
    };

    const getStageJson =()=>{
        const json = stage.value.toJSON();
        console.log(json)
    }


    // 页面挂载后才能绘制
    onMounted(() => {
        initialization()
    });

</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }
    .content-toolbar{
        width: 100%;
        height: 3%;
        box-shadow: 0 1px 0 0 #a0a0ad;
    }
    .content-content{
        width: 100%;
        height: 97%;
    }
    .content-left{
        width: 220px;
        height: 100%;
        float: left;
        border-right: 1px solid #ccc;
    }
    .content-left-img{
        float: left;

        img{
            width: 50px;
            height: 50px;
        }
    }
    .content-right{
        width: calc(100% - 221px);
        height: 100%;
        float: right;
    }
    .draw-board{
        width: 100%;
        height: 100%;
    }
    .draw-konva{
        width: 100%;
        height: 100%;
    }

</style>